import React, { useEffect, useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  ReadOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Dropdown, message, Breadcrumb } from 'antd';
import logo from '../assets/head.jpg'
import { useNavigate, useLocation } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

// 下拉菜单的menu数据
const items = [ 
  {
    key: 'userCenter',
    label: (<a>个人中心</a>),
  },
  {
    key: 'logOut',
    label: (<a>退出</a>),
  },
]

// side 的数据
const itesMenuData = [
  {
    key: '/admin/student_menu',
    icon: <UserOutlined />,
    label: '学生管理',
    children: [
      {
        label: '学生分类',
        key: '/admin/student_menu/student_type',
      },
      {
        label: '学生列表',
        key: '/admin/student_menu/student_list',
      }
    ]
  },
  {
    key: '/admin/class_menu',
    icon: <ReadOutlined />,
    label: '班级管理',
    children: [
      {
        label: '班级分类',
        key: '/admin/class_menu/class_type',
      },
      {
        label: '班级列表',
        key: '/admin/class_menu/class_list',
      },
    ]
  },
  {
    key: '/admin/course_menu',
    icon: <UploadOutlined />,
    label: '课程管理',
  },
]

// 生成面包屑导航
const createNavFn = (key) => {
  // console.log(key);
  let arrObj = []

  const demoFn = (arr) => {
    arr.forEach(n => {
      // console.log(n);
      // n中有children子节点时，内嵌套，把值给到变量children
      // n中没有children时，children为undefined
      // 无论n中有没有children子节点
      // n中的键值对节点，都以自己自带的键值名，赋值给info

      const { children, ...info } = n
      // console.log(info);
      arrObj.push(info)

      // 如果有子节点
      if (children) {
        demoFn(children)
      }      
    })
  }
  demoFn(itesMenuData)

  // 过滤数组
  const temp = arrObj.filter(m => key.includes(m.key))
  // console.log(temp);
  
  if (temp.length > 0) {
    return [{ label: '首页', key: '/admin/student_menu/student_type'}, ...temp]
  } else {
    return []
  }
}

// 查找对应的地址
const searchUrlKey = (key) => {
  let arrObj =[]
  const demoFn = (_arr) => {
    _arr.forEach(n => {
      // console.log(key);
      // console.log(n.key);
      // console.log(key.includes(n.key))
      
      if (key.includes(n.key)) {
        arrObj.push(n.key)
        // 判断当前的节点，有没有子节点
        if (n.children) {
          demoFn(n.children)
        }
      }
    });
  }
  demoFn(itesMenuData)

  return arrObj
}

const MyLayout = ({children}) => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate = useNavigate()

  // 下拉菜单的点击事件
  const onClick = ({key}) => {
    if (key === 'logOut') {
      navigate('/')
    } else {
      message.info('还没开通呢！')
    }
  }
  let { pathname } = useLocation()
  let demoItemsArr = searchUrlKey(pathname)

  // 面包屑导航条
  const [ navurl, setNavurl ] = useState([])

  // 面包屑导航的回调，监听
  // createNavFn
  useEffect(() => {
    // console.log(pathname); 
    setNavurl(createNavFn(pathname)) 
  }, [pathname])
  
  return (
    <Layout style={{width: '100vw', height: '100vw'}}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logoImg">
          <img src={logo} />
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultOpenKeys={demoItemsArr}
          defaultSelectedKeys={demoItemsArr}
          onClick={({key})=>{
            navigate(key)
          }}
          items={itesMenuData}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <span className="titleDiv">学生管理系统 - react v18</span>
          <Dropdown
            menu={{
              items, onClick
            }}
          >
            <img className='isMine' src={logo} />
          </Dropdown>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          {/* {面包屑导航} */}
          <Breadcrumb 
            style={{margin: '0 0 20px 0'}}
          >
            {
              navurl.map(n => {
                return <Breadcrumb.Item key={n.key}> {n.label} </Breadcrumb.Item>
              })
            }
          </Breadcrumb>

          {children}
        </Content>
      </Layout>
    </Layout>
  );
};
export default MyLayout;